<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <base href="${baseHref}/">
      <link rel="stylesheet" type="text/css" href="./style.css">
      <link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />
      <title>Function Run/Debug Panel</title>
  </head>
  <body>
    <div id="root">
      <div class="app">
        <div id="titleBanner" class="info-title"></div>
        <div>
          <button id="startRunBtn" class="btn btn-primary-green" onclick="startRun()">
            <i class="fa fa-play fa-lg"></i> 运行
          </button>
          <button id="startDebugBtn" class="btn btn-primary-green" onclick="startDebug()">
            <i class="fa fa-bug fa-lg"></i> 调试
          </button>
          <button id="stopBtn" class="btn btn-primary-red disabled" disabled onclick="stop()">
            <i class="fa fa-stop fa-lg"></i> 停止
          </button>
        </div>
        <div style="margin-top: 18px;">
          <button
            class="btn btn-second"
            style="float: right; margin-right: 8px; bottom: 1px; position: relative;"
            onclick="createEventFile()"
          >
            <i class="fa fa-plus"></i> 新增
          </button>
          <select id="eventSelect" class="select">
          </select>
          <span style="float: right; font-size: 12px; position: relative; top: 2px;">事件：</span>
          <button id="invokeBtn" class="btn btn-primary disabled" disabled>
              <i class="fa fa-play-circle-o fa-lg"></i> 调用
          </button>
        </div>
        <div>
          <div id="eventContent"></div>
        </div>
        <div>
          <a id="switchEventFile" style="cursor: pointer;" class="hidden" onclick="switchEventFile()">
            设为 Quick Run/Debug 默认事件文件
          </a>
        </div>
      </div>
    </div>
    <script src="../../monaco-editor/min/vs/loader.js"></script>
    <script>
      const titleBanner = document.getElementById('titleBanner');
      const startRunBtn = document.getElementById('startRunBtn');
      const startDebugBtn = document.getElementById('startDebugBtn');
      const stopBtn = document.getElementById('stopBtn');
      const invokeBtn = document.getElementById('invokeBtn');
      const eventSelect = document.getElementById('eventSelect');
      const eventContent = document.getElementById('eventContent');
      const switchEventFileBtn = document.getElementById('switchEventFile');
      let debugPort = '';
      require.config({ paths: { 'vs': '../../monaco-editor/min/vs' }});
      require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(eventContent, {
            value: '',
            language: 'json',
            theme: 'vs-dark',
        });
        editor.getModel().onDidChangeContent((event) => {
            updateEventContent(eventSelect.value, editor.getValue());
        });
        window.addEventListener('message', event => {
          const message = event.data;
          switch (message.command) {
            case 'setEventData': {
              editor.setValue(message.data);
              break;
            }
            case 'isDefaultEventFile': {
              if (message.data) {
                switchEventFileBtn.classList.add('hidden');
              } else {
                switchEventFileBtn.classList.remove('hidden');
              }
              break;
            }
            case 'updateEventFileList': {
              eventSelect.innerHTML = "";
              const eventFileList = message.data.files;
              for (const eventFile of eventFileList) {
                const opt = document.createElement('option');
                opt.value = eventFile;
                opt.innerHTML = eventFile;
                eventSelect.appendChild(opt);
              }
              const selected = message.data.selected || eventFileList[0];
              eventSelect.value = selected;
              getEventData(selected);
              isDefaultEventFile();
              break;
            }
          }
        });
        updateEventFileList();
      });
    </script>
    <script>
      window.addEventListener('message', event => {
        const message = event.data;
        switch (message.command) {
          case 'initFunctionInfo': {
            titleBanner.innerHTML =
              `${message.data.serviceName}/${message.data.functionName}`;
            break;
          }
          case 'updateRunningState': {
            if (message.data === 'RUNNING') {
              startRunBtn.classList.add('disabled');
              startDebugBtn.classList.add('disabled');
              stopBtn.classList.remove('disabled');
              invokeBtn.classList.remove('disabled');
              stopBtn.removeAttribute('disabled');
              invokeBtn.removeAttribute('disabled');
            } else if (message.data === 'DEBUGGING') {
              startRunBtn.classList.add('disabled');
              startDebugBtn.classList.add('disabled');
              stopBtn.classList.remove('disabled');
              invokeBtn.classList.remove('disabled');
              stopBtn.removeAttribute('disabled');
              invokeBtn.removeAttribute('disabled');
            } else {
              startRunBtn.classList.remove('disabled');
              startDebugBtn.classList.remove('disabled');
              stopBtn.classList.add('disabled');
              invokeBtn.classList.add('disabled');
              stopBtn.disabled = true;
              invokeBtn.disabled = true;
            }
            break;
          }
          case 'updateDebugPort': {
            debugPort = message.data;
          }
        }
      });
      eventSelect.onchange = () => {
        getEventData(eventSelect.value);
        isDefaultEventFile();
      }
    </script>
    <script>
      const vscode = acquireVsCodeApi();
      function getEventData(eventFile) {
        vscode.postMessage({
          command: 'getEventData',
          data: eventFile,
        });
      }
      function isDefaultEventFile() {
        vscode.postMessage({
          command: 'isDefaultEventFile',
          data: eventSelect.value,
        });
      }
      function updateEventFileList() {
        vscode.postMessage({
          command: 'updateEventFileList',
        });
      }
      function localRun() {
        vscode.postMessage({
          command: 'localRun',
          data: eventSelect.value,
        });
      }
      function localDebug() {
        vscode.postMessage({
          command: 'localDebug',
          data: {
            eventFile: eventSelect.value,
            debugPort,
          }
        });
      }
      function createEventFile() {
        vscode.postMessage({
          command: 'createEventFile',
          data: eventSelect.value,
        });
      }
      function switchEventFile() {
        vscode.postMessage({
          command: 'switchEventFile',
          data: eventSelect.value,
        });
      }
      function updateEventContent(eventFile, eventContent) {
        vscode.postMessage({
          command: 'updateEventContent',
          data: {
            eventFile,
            eventContent,
          }
        })
      }
      function startRun() {
        invokeBtn.setAttribute('onclick', 'localRun();');
        vscode.postMessage({
          command: 'start',
          data: {
            debugMode: false,
          }
        });
      }
      function startDebug() {
        invokeBtn.setAttribute('onclick', 'localDebug();');
        vscode.postMessage({
          command: 'start',
          data: {
            debugMode: true,
          }
        });
      }
      function stop() {
        invokeBtn.removeAttribute('onclick');
        vscode.postMessage({
          command: 'stop',
        });
      }
    </script>
  </body>
</html>
